<template>
  <div class="Square">
    <navbar title="广场" :show-back="false"></navbar>
    <page :top="133">
      <van-tabs v-model="active" class="fa" @change="childrenChange">
        <van-tab v-for="item, index in hall" :title="item.title" :key="index">
          <van-tabs swipeable v-model="item.index" @change="childrenChange" class="chil">
            <van-tab v-for="v, i in item.children" :title="v.title" :key="i">
              <van-list v-model="v.loading" :immediate-check="false" :finished="v.finished" finished-text="没有更多了"
                @load="getTabList">
                <div class="nodata" v-if="v.content.length == 0">
                  <p>没有数据</p>
                </div>
                <template v-else>
                  <item :list="v.content"></item>
                </template>
              </van-list>
            </van-tab>
          </van-tabs>
        </van-tab>
      </van-tabs>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      hall: [
        {
          type: 1,
          title: '失物招领',
          index: 0,
          children: [
            { title: '全部', type: -1, page: 1, loading: false, finished: false, totalpage: 3, content: [] },
            { title: '证件', type: 1, page: 1, loading: false, finished: false, totalpage: 3, content: [] },
            { title: '服装', type: 2, page: 1, loading: false, finished: false, totalpage: 5, content: [] },
            { title: '数码', type: 3, page: 1, loading: false, finished: false, totalpage: 2, content: [] },
            { title: '日用品', type: 4, page: 1, loading: false, finished: false, totalpage: 1, content: [] },
            { title: '其他', type: 5, page: 1, loading: false, finished: false, totalpage: 4, content: [] },
          ]
        },
        {
          type: 2,
          title: '寻物启事',
          index: 0,
          children: [
            { title: '全部', type: -1, page: 1, loading: false, finished: false, totalpage: 4, content: [] },
            { title: '证件', type: 1, page: 1, loading: false, finished: false, totalpage: 3, content: [] },
            { title: '服装', type: 2, page: 1, loading: false, finished: false, totalpage: 5, content: [] },
            { title: '数码', type: 3, page: 1, loading: false, finished: false, totalpage: 2, content: [] },
            { title: '日用品', type: 4, page: 1, loading: false, finished: false, totalpage: 1, content: [] },
            { title: '其他', type: 5, page: 1, loading: false, finished: false, totalpage: 4, content: [] },
          ]
        }
      ]
    }
  },
  created() {
    this.getTabList("click")
  },
  methods: {
    async getTabList(type) {
      let childrenObj = this.hall[this.active].children[this.hall[this.active].index]

      let a = async () => {
        let res = await this.$http.home.tab({
          thing_type: this.hall[this.active].type,
          thing_category: childrenObj.type,
          page: childrenObj.page
        });

        childrenObj.content = [
          ...childrenObj.content,
          ...res
        ]

        childrenObj.page += 1;

        if (childrenObj.page > childrenObj.totalpage) {
          childrenObj.finished = true
        } else {
          childrenObj.loading = false
        }
      }

      type == "click"
        ? childrenObj.content.length == 0 ? a() : null
        : a()
    },
    childrenChange() {
      this.getTabList("click")
      // console.log('99',click)
    }
  }

}
</script>

<style scoped lang='less'>
@import "~@less/Square";
</style>
